<template>
	<div class="base-info-content">
		<el-form ref="ruleFormRef" label-width="160px">
			<el-form-item label="选择商品：" prop="imgUrl">
				<section @click="selectGoods()">
					<el-image v-if="props.goodsData.hasOwnProperty('imgUrl')"
						style="width:64px; height: 64px;border-radius: 5px;" :src="props.goodsData.imgUrl" fit="cover" />
					<section v-else class="selector-img">
						<el-icon size="30" color="#999">
							<Plus />
						</el-icon>
					</section>
				</section>
			</el-form-item>
		</el-form>
		<goodSelectDialog :isMultiSelect="false" @goodsSubmitFun="goodsSubmitFun" ref="goodSelectDialogRef" />
	</div>
</template>
<script setup lang="ts" name="funWangEditor">
import { ref, defineAsyncComponent } from 'vue';
import { Plus } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
// 引入组件
const goodSelectDialog = defineAsyncComponent(() => import('/@/components/dialog/goodSelect.vue'));
// 定义变量内容
const goodSelectDialogRef = ref();
const ruleFormRef = ref<FormInstance>()
const emit = defineEmits(['updateGoodsData']);
const props = defineProps({
	// 是否多选
	goodsData: {
		type: Object,
		default: () => {},
	},
});

// 图片选中
const selectGoods = () => {
    goodSelectDialogRef.value.openDialog();
}

// 选中关联商品
const goodsSubmitFun = (list: any) =>{
	emit('updateGoodsData',list[0]);
}
</script>

<style lang="scss" scoped>
.base-info-content {
	.form-ele-size {
		width: 260px;
	}

	.line-title {
		font-size: 18px;
		padding: 8px 12px;
		background-color: #eceef0;
		border-radius: 6px;
		margin-bottom: 15px;
	}

	.selector-img {
		width: 64px;
		height: 64px;
		border: 1px solid #ededed;
		border-radius: 5px;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		&:hover {
			background-color: #f5f5f5;
			border: 1px solid #e4e3e3;
		}
	}
	.typeBox{
		height: 65px;
		margin-right: 15px;
		border: 1px solid var(--el-border-color-light, #ebeef5);
		line-height: 24px;
		box-sizing: border-box;
		cursor: pointer;
		span:first-child{
			font-weight: 600;
		}
		span:last-child{
			font-weight: 500;
			color: var(--el-color-info-light-3);
		}
	}
	.typeBoxSelected {
		border: 1px solid var(--el-color-primary);
		position: relative;
		.virtual_san{
			position: absolute;
			bottom: 0;
			right: 0;
			width: 0;
			height: 0;
			border-bottom: 26px solid var(--el-color-primary);
			border-left: 26px solid transparent;
		}
		.virtual_dui{
			position: absolute;
			bottom: -2px;
			right: 2px;
			color: #fff;
			font-family: system-ui;
		}
	}
}


</style>
